<template>
  <div class="footer-container">
    <div class="box">
      <div class="center">
        <div class="company-info">
          <div class="company">
            <div class="company-item">
              <p><span>官方预订及服务热线&nbsp;:&nbsp;&nbsp;&nbsp;</span><span>(021) 5118 1200 </span><span class="time">早8点到晚8点</span></p>
              <p><span>加盟热线&nbsp;:&nbsp;&nbsp;&nbsp;</span><span>18721204279</span><span class="time">早8点到晚8点</span></p>
              <p><span class="time">合作邮箱&nbsp;:&nbsp;&nbsp;&nbsp;</span><a href="mailto:1120962733@qq.com">1120962733@qq.com</a></p>
            </div>
          </div>
          <ul class="pc-code">
            <li>
              <img src="https://www.mljhotels.com/_nuxt/img/wx.4f25faa.jpg" alt="官方公众号">
              <span>官方公众号</span>
            </li>
            <li>
              <img src="https://www.mljhotels.com/_nuxt/img/gzh.5240b2a.jpg" alt="咨询微信号">
              <span>咨询微信号</span>
            </li>
            <li>
              <img src="https://www.mljhotels.com/_nuxt/img/xcx.5b94324.jpg" alt="官方小程序">
              <span>官方小程序</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="box footer_company">
      <div class="center"></div>
      <div class="ban">版权所有@上海领军酒店服务有限公司保留所有权利</div>
      <div class="company"></div>
      <a href="https://beian.miit.gov.cn/#/Integrated/index">沪ICP备12026753号</a>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
  .footer-container{
    top: 210vh;
    display: block;
    width: 100%;
    position:absolute;
    height: 216.33px;
    background: #f5f5f5;
    .box{
      box-shadow: 0 -1px 0 0 #f8f9fa;
      color: #333;
      font-size: 14px;
      overflow: hidden;
      .center{
        margin: 0 auto;
        max-width: 1004px;
        .company-info{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          padding: 40px 0;
          .company{
            font-size: 14px;
            font-weight: 400;
            line-height: 29px;
            .company-item{
              color: #272a2b;
              font-size: 12px;
              font-weight: 400;
              p{
                display: block;
                margin-block-start: 1em;//作用是设置元素在块级流方向起始处的外边距，如果是横向的话对应上边距
                margin-block-end: 1em;
                margin-inline-start: 0px;//设置元素在行内流方向起始处的外边距
                margin-inline-end: 0px;
              }
              .time{
                padding: 0 12px;
              }
              a{
                color: #333;
                font-size: 14px;
                padding-right: 8px;
              }
            }
          }
          .pc-code{
            li{
              display: inline-block;
            vertical-align: top;
            margin-left: 48px;
            text-align: center;
            img{
              display: block;
              height: auto;
              width: 86px;
            }
            span{
              color: #272a2b;
              display: block;
              font-size: 12px;
              font-weight: 400;
              margin-top: 16px;
            }
            }
          }
        }
      }
    }
    .footer_company{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      font-size: 12px;
      border-top:  1px solid #fff;
      height: 70px;
      color: #333;
      box-shadow: 0 -1px 0 0 #f8f9fa;
      .center{
        margin: 0 auto;
        max-width: 1004px;
      }
      a{
        cursor: pointer;
        text-decoration: underline;
        color: rgb(103, 105, 106)
      }
    }

  }
</style>